<template>
  <view class="CartCompute">
    <!-- 标题 -->
    <view class="title_box">
      <view class="title">基础信息</view>
    </view>
    <u--form ref="form1" :model="priceInfo" :rules="rules" labelWidth="160px" labelPosition="left">
      <view class="form_box">
        <u-form-item label="品牌" borderBottom prop="brand">
          <!-- @click="showCartBrand = true" -->
          <u--input disabled border="none" disabledColor="#ffffff" placeholder="请选择品牌" v-model="priceInfo.brand">
          </u--input>
        </u-form-item>
        <u-form-item required label="车型" borderBottom prop="carModel" @click="showCartModel = true">
          <!-- hideKeyboard() -->
          <u--input disabled border="none" disabledColor="#ffffff" placeholder="请选择车型" v-model="priceInfo.carModel">
          </u--input>
          <u-icon slot="right" name="arrow-down"></u-icon>
        </u-form-item>
        <u-form-item required borderBottom prop="guide" label="指导价格(元)">
          <u--input disabled border="none" placeholder="请输入指导价格" :value="priceInfo.guide | moneyShow"></u--input>
        </u-form-item>
        <u-form-item borderBottom label="优惠金额(元)" prop="discounts">
          <u--input type="digit" border="none" placeholder="请输入优惠金额" @blur="inputBlur('discounts', $event)"
            :value="priceInfo.discounts | moneyShow"></u--input>
        </u-form-item>
        <u-form-item required borderBottom label="成交价格(元)">
          <u--input disabled border="none" :value="(priceInfo.guide - priceInfo.discounts) | moneyShow"></u--input>
        </u-form-item>
      </view>
      <!-- 标题 -->
      <view class="title_box">
        <view class="title">分期购车享优惠</view>
      </view>
      <view class="form_box">
        <u-form-item required borderBottom label="首付比例(%)" @click="showDownPayment = true">
          <u--input disabled border="none" disabledColor="#ffffff" :value="showRatio"></u--input>
          <!-- :value="priceInfo.ratio * 100" -->
          <u-icon slot="right" name="arrow-down"></u-icon>
        </u-form-item>
        <u-form-item required borderBottom label="首付金额(元)">
          <u--input disabled border="none" :value="downPayment | moneyShow"></u--input>
        </u-form-item>
        <u-form-item required label="贷款金额(元)" borderBottom>
          <u--input disabled border="none" :value="loansMoney | moneyShow"></u--input>
        </u-form-item>
        <u-form-item required borderBottom label="贷款时间(期数)" @click="showPeriods = true">
          <u--input disabled border="none" disabledColor="#ffffff" :value="showTime"></u--input>
          <u-icon slot="right" name="arrow-down"></u-icon>
        </u-form-item>
        <u-form-item required label="月还款(元)" prop="month" borderBottom>
          <u--input disabled border="none" placeholder="请输入月还款" :value="monthMoney | moneyShow"></u--input>
        </u-form-item>
        <u-form-item required label="利率(%)" prop="rate" borderBottom>
          <u--input type="digit" maxlength="3" border="none" placeholder="请输入利率" v-model="priceInfo.rate">
          </u--input>
        </u-form-item>
        <u-form-item required borderBottom label="利息(元)">
          <u--input disabled border="none" :value="interMoney | moneyShow"></u--input>
        </u-form-item>
      </view>
      <!-- 标题 -->
      <view class="title_box">
        <view class="title">服务费用</view>
      </view>
      <view class="form_box">
        <u-form-item borderBottom label="手续费(元)" prop="service">
          <u--input border="none" type="digit" placeholder="请输入手续费" @blur="inputBlur('service', $event)"
            :value="priceInfo.service | moneyShow"></u--input>
        </u-form-item>
        <u-form-item borderBottom label="装饰费(元)" prop="decorate">
          <u--input border="none" type="digit" placeholder="请输入装饰费" @blur="inputBlur('decorate', $event)"
            :value="priceInfo.decorate | moneyShow"></u--input>
        </u-form-item>
        <u-form-item borderBottom label="其它费用(元)" prop="othe">
          <u--input border="none" type="digit" placeholder="请输入其它费用" @blur="inputBlur('othe', $event)"
            :value="priceInfo.othe | moneyShow"></u--input>
        </u-form-item>
      </view>
      <!-- 标题 -->
      <view class="title_box">
        <view class="title">必要花费</view>
      </view>
      <view class="form_box">
        <u-form-item required label="上牌费(元)" prop="apply" borderBottom>
          <u--input border="none" type="digit" placeholder="请输入上牌费" @blur="inputBlur('apply', $event)"
            :value="priceInfo.apply | moneyShow"></u--input>
        </u-form-item>
        <u-form-item required borderBottom label="购置税预估(元)">
          <u--input disabled border="none" :value="monthPurchase | moneyShow"></u--input>
        </u-form-item>
        <u-form-item required label="交强(元)" borderBottom prop="jiajiang" @click="showJiajiang = true">
          <u--input disabled border="none" disabledColor="#fff" placeholder="请选择交强费"
            :value="priceInfo.jiajiang | moneyShow"></u--input>
          <u-icon slot="right" name="arrow-down"></u-icon>
        </u-form-item>
        <u-form-item required borderBottom label="车船(元)" prop="chechuan" @click="showChechuan = true">
          <u--input disabled disabledColor="#fff" border="none" placeholder="请选择车船费"
            :value="priceInfo.chechuan | moneyShow"></u--input>
          <u-icon slot="right" name="arrow-down"></u-icon>
        </u-form-item>
        <u-form-item required label="商业保险总额预估(元)" prop="shangye" borderBottom>
          <u--input border="none" type="digit" @blur="inputBlur('shangye', $event)" placeholder="请输入商业保险总额预估"
            :value="priceInfo.shangye | moneyShow"></u--input>
        </u-form-item>
      </view>
    </u--form>
    <view class="bottom_box">
      <u-button color="#de4141" @click="submit">提 交</u-button>
    </view>
    <view class="tips"><text>提示：计算结果仅供参考，实际计算以门店为准。</text></view>
    <!-- 底抽屉 -->
    <u-picker title="请选择品牌" :immediateChange="true" :closeOnClickOverlay="true" @close="showCartBrand = false"
      :show="showCartBrand" @confirm="selectShowCartBrand" @cancel="showCartBrand = false"
      :columns="selectParam.cartBrand" keyName="name">
    </u-picker>
    <u-picker :immediateChange="true" :show="showCartModel" :columns="carModelList" :closeOnClickOverlay="true"
      title="请选择车型" @close="showCartModel = false" @confirm="selectsSowCartModel" keyName="name"
      @cancel="showCartModel = false">
    </u-picker>
    <u-picker :defaultIndex="[3]" :immediateChange="true" :show="showDownPayment" :columns="selectParam.downPayment"
      :closeOnClickOverlay="true" title="请选择首付比例" @close="showDownPayment = false" @confirm="selectDownPayment"
      @cancel="showDownPayment = false" keyName="name">
    </u-picker>
    <u-picker :defaultIndex="[1]" :immediateChange="true" :show="showPeriods" :closeOnClickOverlay="true"
      :columns="selectParam.periods" title="请选择贷款期数" @close="showPeriods = false" @confirm="selectShowPeriods"
      @cancel="showPeriods = false" keyName="name"></u-picker>
    <!-- 交强 -->
    <u-picker :immediateChange="true" :show="showJiajiang" :closeOnClickOverlay="true" :columns="selectParam.jiajiang"
      title="请选择交强险" @close="showJiajiang = false" @confirm="selectJiajiang" @cancel="showJiajiang = false"
      keyName="name"></u-picker>
    <!-- 车船 -->
    <u-picker :immediateChange="true" :show="showChechuan" :closeOnClickOverlay="true" :columns="selectParam.chechuan"
      title="请选择车船险" @close="showChechuan = false" @confirm="selectChechuan" @cancel="showChechuan = false"
      keyName="name"></u-picker>
    <u-modal :show="show" title="预估提车金额" @close="show = false" @confirm="show = false" :closeOnClickOverlay="true">
      <view class="slot-content">
        <view class="modal_price">
          <text>￥：{{ totalMoney | moneyShow }}</text>
        </view>
        <!-- 列表展示 -->
        <!-- 不等于空才显示 -->
        <view class="show_box" v-if="loansMoney">
          <view class="item_box">
            <view class="item_name">首付比例(%)</view>
            <view class="item_val">{{ priceInfo.ratio * 100 }}</view>
          </view>
          <view class="item_box">
            <view class="item_name">首付金额(元)</view>
            <view class="item_val">{{ downPayment | moneyShow }}</view>
          </view>
          <view class="item_box">
            <view class="item_name">贷款时间(期数)</view>
            <view class="item_val">{{ priceInfo.time }}</view>
          </view>
          <view class="item_box">
            <view class="item_name">月还款(元)</view>
            <view class="item_val">{{ monthMoney | moneyShow }}</view>
          </view>
          <view class="item_box">
            <view class="item_name">贷款金额(元)</view>
            <view class="item_val">{{ loansMoney | moneyShow }}</view>
          </view>
          <view class="item_box">
            <view class="item_name">利率(%)</view>
            <view class="item_val">{{ priceInfo.rate }}</view>
          </view>
          <view class="item_box noBorder">
            <view class="item_name">利息(元)</view>
            <view class="item_val">{{ interMoney | moneyShow }}</view>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
// 购车计算规则
import { mapState, } from 'vuex'
import { carModelListApi } from '@/API/carSeries'
import { selectParam, rulesCartCompute, } from '@/static/js/rules'

export default {
  name: 'CartCompute',
  data() {
    return {
      // 车型，车系列表
      carModelList: [[]],
      show: false,
      showCartBrand: false,
      showCartModel: false,
      showDownPayment: false,
      showPeriods: false,
      // 交强险
      showJiajiang: false,
      // 车船险
      showChechuan: false,
      selectParam,
      priceInfo: {
        brand: 'ZEEKR',
        carModel: '',
        guide: '',
        discounts: '',
        make: 500,
        ratio: 0.3,
        first: '',
        loans: '',
        time: 3,
        month: '',
        rate: '',
        interest: '',
        service: '',
        decorate: '',
        othe: '',
        apply: '',
        purchase: '',
        jiajiang: '',
        chechuan: '',
        shangye: '',
      },
      // total: 'ddd',
      // value: '',
      rules: rulesCartCompute,
      switchVal: false,
      showRatio: '30%', // 首付比例(%)
      showTime: '3期', // 贷款时间(期数)
    }
  },
  computed: {
    // 首付金额
    downPayment() {
      let temp = this.priceInfo
      return ((temp.guide - temp.discounts) * temp.ratio).toFixed(2)
    },
    // 贷款金额
    loansMoney() {
      let temp = this.priceInfo
      if (temp.ratio == 1) return 0.0
      return ((temp.guide - temp.discounts) * (1 - temp.ratio)).toFixed(2)
    },
    // 利息
    interMoney() {
      let temp = this.priceInfo
      let temp2 = this.loansMoney
      return ((temp.rate * Number(temp2)) / 100).toFixed(2)
    },
    // 月还款
    monthMoney() {
      if (this.priceInfo.time == 0) {
        this.priceInfo.rate = '0'
        return 0
      }
      let temp = this.interMoney
      let temp2 = this.loansMoney
      return ((Number(temp) + Number(temp2)) / this.priceInfo.time).toFixed(2)
    },
    // 购置税
    monthPurchase() {
      let temp = this.priceInfo
      return ((temp.guide - temp.discounts) * 0.1).toFixed(2)
    },
    // 总还款
    totalMoney() {
      let temp = this.priceInfo

      let temp3 = Number(temp.service) || 0 //手续费
      let temp4 = Number(temp.decorate) || 0 //装饰费
      let temp5 = Number(temp.othe) || 0 //其它
      // 购置税
      let temp6 = Number(this.monthPurchase) //购置税
      let temp7 = Number(temp.jiajiang) || 0 //交强
      let temp8 = Number(temp.chechuan) || 0 //车船
      let temp9 = Number(temp.shangye) || 0 //商业保险总额预估
      let temp10 = Number(temp.apply) || 0 // 上牌费

      let temp11 = this.downPayment //首付
      let temp12 = Number(temp11) || 0 // 首付

      let total =
        temp3 + //手续费
        temp4 + //装饰费
        temp5 + //其它
        temp6 + //购置税
        temp7 + //交强
        temp8 + //车船
        temp9 + //商业保险总额预估
        temp10 + // 上牌费
        temp12 // 首付
      console.log(total)
      return total
    },
    ...mapState(['brandInfo'])
  },
  methods: {
    inputBlur(n, v) {
      console.log('n', n)
      console.log('v', v)
      console.log(this.priceInfo[n])
      // if (v === '') return false
      if (v.indexOf(',') != -1) {
        this.priceInfo[n] = v.replace(/\,/g, '')
      } else {
        this.priceInfo[n] = v
      }
    },
    selectShowCartBrand(e) {
      // console.log(e.value[0].name);
      this.priceInfo.brand = e.value[0].name
      this.showCartBrand = false
    },
    // 车型
    selectsSowCartModel(e) {
      this.priceInfo.carModel = e.value[0].name
      this.priceInfo.guide = e.value[0].value
      this.showCartModel = false
    },
    // 首付比例(%)
    selectDownPayment(e) {
      this.showRatio = e.value[0].name
      // console.log(e.value[0].name)
      let temp = e.value[0].value
      this.priceInfo.ratio = temp
      this.showDownPayment = false
      if (temp === 1) {
        this.priceInfo.rate = '0'
        this.priceInfo.time = 0
        this.showTime = '无贷款'
        return false
      }

      if (this.priceInfo.time == 0) {
        this.priceInfo.time = 3
        this.showTime = '3期'
      }
    },
    // 贷款期数
    selectShowPeriods(e) {
      this.priceInfo.time = e.value[0].value
      console.log(e.value[0].name)
      this.showTime = e.value[0].name
      this.showPeriods = false
    },
    // 交强险
    selectJiajiang(e) {
      this.priceInfo.jiajiang = e.value[0].value
      this.showJiajiang = false
    },
    // 车船险
    selectChechuan(e) {
      this.priceInfo.chechuan = e.value[0].value
      this.showChechuan = false
    },
    submit(e) {
      this.$refs.form1
        .validate()
        .then((res) => {
          this.show = true
          // uni.$u.toast('校验通过')
        })
        .catch((errors) => {
          console.log('errors', errors)
          // uni.$u.toast('请输入完整数据！')
        })
    },
    // 车型
    async getCarModelList() {
      let { brand_id } = this.brandInfo
      const {
        data: { data },
      } = await carModelListApi({ brand_id, state: 1 })
      // console.log(data)
      data.forEach((item1) => {
        item1.ve_groups.forEach((item2) => {
          if (item2.vem_price) {
            this.carModelList[0].push({
              value: item2.vem_price,
              name: item2.vem_name,
            })
          }
        })
      })
    },
  },
  onLoad(options) {
    // 混合分享信息
    this.shareMixin.title = `购车计算`
    this.shareMixin.path = `/pages/CartCompute`
    // 如果从汽车详情转过来则赋值
    this.priceInfo.carModel = options.CartModel || ''
    this.priceInfo.guide = options.price || ''
    this.getCarModelList()
  },
}
</script>
<style scoped lang="scss">
$paddBilate: 0 30rpx;

.form_box {
  padding: $paddBilate;
}

.title_box {
  background-color: #f1f1f1;
  padding: $paddBilate;

  .title {
    position: relative;
    font-weight: 600;
    font-size: 32rpx;
    line-height: 80rpx;
    padding-left: 16rpx;
    color: #000000;

    &::before {
      content: '  ';
      width: 8rpx;
      display: block;
      height: 34rpx;
      background-color: $theme-color;
      position: absolute;
      top: 12px;
      left: 0rpx;
    }
  }
}

.bottom_box {
  width: 70%;
  margin: 0rpx auto;
  margin-top: 40rpx;
}

.tips {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  line-height: 60rpx;
  margin-bottom: 30rpx;
}

.modal_price {
  margin: 0rpx auto;
  margin-top: 40rpx;
  text-align: center;
  border: 1px dashed $theme-color;
  background-color: #fdedf0;
  border-radius: 8rpx;
  width: 480rpx;
  font-size: 26rpx;
  color: #222;
  font-weight: 600;
  line-height: 70rpx;
}

.show_box {
  margin: 0rpx 20rpx;
  padding: 40rpx 0px 0px 0px;
  font-size: 26rpx;

  .item_box {
    display: flex;
    line-height: 60rpx;
    border-bottom: 1px solid #f1f1f1;

    .item_name {
      width: 70%;
    }

    .item_val {
      flex: 1;
      text-align: left;
    }
  }

  .noBorder {
    border: none;
  }
}</style>
